<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系人菜单/Cmpay UI Library</title>
    <link rel="stylesheet" href="../css/style.css" />
    <!-- 框架 begin  -->
    <link rel="stylesheet" href="../../fwk/css/bootstrap.css"/>
    <link rel="stylesheet" href="../../fwk/css/common.css"/>
    <!-- 框架 end  -->
    
    <!-- 代码着色 begin  -->
    <link rel="stylesheet" href="../../fwk/css/SyntaxHighlighter.css"/>
    <!-- 代码着色 end  -->
    
    <!-- ui begin  -->
    <link rel="stylesheet" href="../css/ui-common.css"/>
    <!-- ui end  -->
    
  	<!-- 框架 begin  -->
    <script src="../../fwk/js/jquery-1.10.2.js"></script>
    <script src="../../fwk/js/bootstrap.js"></script>
    <script src="../../fwk/js/common.js"></script>
    <!-- 框架 end  -->
    
    <!-- 代码着色 begin  -->
    <script src="../../fwk/js/shCoreCommon.js"></script>
    <!-- 代码着色 end  -->
    
    <!-- ui begin  -->
    <script src="../js/ui-common.js"></script>
    
    <!-- ui end  -->
</head>
<body>
   <div class="content-div">
	    <div id="showDiv">
	    </div>
	    <hr/>
	    
	    <ul class="nav nav-pills nav-bar">
	    	<li id="navL1" class="active"><a class="active" href="#">源码</a></li>
	    	<li id="navL2"><a href="#">API</a></li>
	    	<li id="navL3"><a href="#">运行</a></li>
	    </ul>
	    
	    <div class="menu-content">
	    	
		    <div id="navL1Div" class="navDiv">
		    	文件引入：
		    	<pre  class="html" name="code">
		    		&lt;link rel="stylesheet" type="text/css" href="../css/ui-common.css" /&gt;
		    		&lt;script type="text/javascript" src="../js/ui-common.js"></script>
		    	</pre>
		    	<br/>
		        UI 代码:
		    	<pre id="codePre" class="html" name="code">
			    </pre>
			    <br/>
			    说明：
			    <div id="noticeDiv">
			    </div>
		    </div>
		    
		    <div id="navL2Div" class="navDiv collapse">
		        <ul>
		    	    <li><pre>$(selector).personbox():  联系人菜单,在页面初始化时，初始化，下拉框只初始化一次。<br/>参数：无<br/>示例：$('#person_input_control').selection(); 当前页面已默认初始化了，直接点击输入框即可看见效果.<br/>备注：下拉数据源来自代码中的ul标签,如果是异步加载的数据，可以在异步加载后设置ul.box-content的标签内容，然后调用入口程序$(selector).selection()</pre></li>
		        </ul>
		    </div>
		    
		    <div id="navL3Div" class="navDiv collapse">
			    <textarea id="scriptText" rows="8" class="nav-justified"></textarea>
			    <div><a class="runBtn" onclick="runScrpit('scriptText')">运行</a></div>
		    </div>
	    
	    </div>
	    
    </div> 
</body>




<script type="text/javascript">
$(document).ready(function ()
    	{
    	    //代码着色、url参数获取
    	    init();
    	    
    	    var uiHtml = "";
    	    var notice = "无";
    	    
    	    switch (uiType)
    	    {
    	        case "0":
    	        {
    	            uiHtml = '<div class="u-input">\n'
        +'<label for="person_input">输入框:</label>\n'
        +'<div class="u-control" id="person_input_control">\n'
           +' <input type="text"  id="person_input" placeholder="手机号码" />\n'
           +' <span class="u-ui-person"></span>\n'
            +'<div class="u-ui-personbox" >\n'
                +'<div class="box-header">\n'
                    +'<div class="box-single"></div>\n'
                +'</div>\n'
                +'<div class="box-inner">\n'
                    +'<ul class="box-tab f-usn" cur-index="0">\n'
                        +'<li class="first" data-index="0">我的联系人</li>\n'
                        +'<li class="" data-index="1">最近缴费</li>\n'
                    +'</ul>\n'
                    +'<ul class="box-content" cur-index="0">\n'
                        +'<li class="item" data-value="18711027660" data-index="0">18711027660(小明)</li>\n'
                        +'<li class="item" data-value="18711027660" data-index="1">18711027660(小明)</li> \n'
                        +'<li class="item" data-value="18711027660" data-index="2">18711027660(小明)</li> \n'
                        +'<li class="item" data-value="18711027660" data-index="3">18711027660(小明)</li> \n'
                        +'<li class="item" data-value="18711027660" data-index="4">18711027660(小明)</li>\n'
                    +'</ul>\n'
                    +'<ul class="box-content" cur-index="0">\n'
                        +'<li class="item" data-value="18711027660" data-index="0">18711027660(小明)</li> \n'
                        +'<li class="item" data-value="18711027660" data-index="1">18711027660(小明)</li> \n'
                        +'<li class="item" data-value="18711027660" data-index="2">18711027660(小明)</li> \n'
                        +'<li class="item" data-value="18711027660" data-index="3">18711027660(小明)</li> \n'
                       +' <li class="item hover" data-value="18711027660" data-index="4">18711027660(小明)</li> \n'
                    +'</ul>\n'
                +'</div>\n'
            +'</div>\n'
            +'<!--end person-box-->\n'
        +'</div>\n'
    +'</div>';
                    notice = "联系人控件";
    	            break;
    	        }
    	        
    	        default:
    	        {}
    	    }
    	    
    	    $("#showDiv").html(uiHtml);
    	    $("#codePre").html(uiHtml.replace(/</g, "&lt;"));
    	    $("#noticeDiv").html(notice);
            
            //后处理
    	    afterDo();
    	});
    	
    </script>
   <script type="text/javascript" src="../js/input.js"></script>
   <script type="text/javascript">
        $(document).ready(function(){
            $('#person_input_control').personbox();
        });
   </script>
</html>
